<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Global values')"
    width="1200px"
    @close="store.hide()"
  >
    <el-card>
      <el-tabs v-model="activeTab">
        <!-- Parameters 标签页 -->
        <el-tab-pane :label="t('Parameters')" name="parameters">
          <el-row :gutter="8">
            <!-- 左侧参数列表 -->
            <el-col :span="6">
              <el-scrollbar height="500px">
                <el-menu
                  :default-active="store.selectedParameterId"
                  @select="store.handleParameterSelect"
                  style="border: none;"
                >
                  <el-menu-item
                    v-for="key in store.parameterKeys"
                    :key="key"
                    :index="key"
                    class="config-item"
                  >
                    {{ key }}
                  </el-menu-item>
                </el-menu>
              </el-scrollbar>
            </el-col>
            
            <!-- 右侧参数编辑区域 -->
            <el-col :span="18">
              <el-row style="margin-bottom: 0;">
                <label>{{ t('Parameter Value') }}:</label>
              </el-row>
              <el-row>
                <el-input
                  type="textarea"
                  v-model="store.parameterValue"
                  :disabled="!store.isEditing"
                  :rows="20"
                  resize="none"
                  spellcheck="false"
                />
              </el-row>
              <el-row justify="end">
                <el-button 
                  :disabled="!store.canEdit"
                  @click="store.startEditing()"
                >
                  {{ t('Edit') }}
                </el-button>
                <el-button 
                  type="primary"
                  :disabled="!store.canSave"
                  @click="store.saveParameter()"
                >
                  {{ t('Save') }}
                </el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- Variables 标签页 -->
        <el-tab-pane :label="t('Variables')" name="variables">
          <el-row :gutter="8">
            <!-- 左侧变量列表 -->
            <el-col :span="6">
              <el-scrollbar height="500px">
                <el-menu
                  :default-active="store.selectedVariableId"
                  @select="store.handleVariableSelect"
                  style="border: none;"
                >
                  <el-menu-item
                    v-for="key in store.variableKeys"
                    :key="key"
                    :index="key"
                    class="config-item"
                  >
                    {{ key }}
                  </el-menu-item>
                </el-menu>
              </el-scrollbar>
            </el-col>
            
            <!-- 右侧变量显示区域 -->
            <el-col :span="18">
              <el-row style="margin-bottom: 0;">
                <label>{{ t('Variable Value') }}:</label>
              </el-row>
              <el-row>
                <el-input
                  type="textarea"
                  :model-value="store.variableValue"
                  :rows="22"
                  readonly
                  resize="none"
                  spellcheck="false"
                />
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useGlobalValuesStore } from '@/stores/globalValues'
import { useLanguageStore } from '@/stores/language'

const store = useGlobalValuesStore()
const languageStore = useLanguageStore()
const activeTab = ref('parameters')

// 翻译函数
const t = (key) => {
  const translations = {
    'Global values': {
      'en': 'Global values',
      'zh': '全局值一览'
    },
    'Parameters': {
      'en': 'Parameters',
      'zh': '参数'
    },
    'Variables': {
      'en': 'Variables',
      'zh': '变量'
    },
    'Parameter Value': {
      'en': 'Parameter Value',
      'zh': '参数值'
    },
    'Variable Value': {
      'en': 'Variable Value',
      'zh': '变量值'
    },
    'Edit': {
      'en': 'Edit',
      'zh': '编辑'
    },
    'Save': {
      'en': 'Save',
      'zh': '保存'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>

<style scoped>
.config-item {
  height: auto;
  line-height: 1.4;
  padding: 8px;
}
</style>